<template>
  <AvatarBase
    :user-id="userId"
    :width="width"
    :border-radius="borderRadius"
    v-if="contactType === 1"
  ></AvatarBase>

  <el-popover
    v-else
    :width="280"
    placement="right-start"
    :show-arrow="false"
    trigger="click"
    transition="none"
    :hide-after="0"
    ref="popoverRef"
  >
    <template #reference>
      <AvatarBase
        :user-id="userId"
        :width="width"
        :border-radius="borderRadius"
      ></AvatarBase>
    </template>

    <template #default>
      <div class="popover-user-panel">
        <UserInfo :user-profile="userProfile"></UserInfo>
      </div>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import AvatarBase from "./AvatarBase.vue";
import UserInfo from "../user/UserInfo.vue";
import { ref } from "vue";
import { useUserStore } from "@/store/useUserStore";


const userStore: any = useUserStore();
const userProfile = ref(userStore.userInfo);

const props = defineProps({
  userId: {
    type: String,
  },
  width: {
    type: Number,
    default: 40,
  },
  borderRadius: {
    type: Number,
    default: 0,
  },
  groupId: {
    type: String,
  },
  contactType: {
    type: Number,
    default: 0,
  },
});
</script>

<style scoped lang="scss"></style>
